<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>图书管理-添加图书</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style type="text/css">
        .table tbody tr td {
            vertical-align: middle;
        }

        table {
            margin-top: 5%;
        }
        span{color:red;}

    </style>
</head>
<body>
<div class="container" id="app">
    <form  id="myform">
        <table class="table table-bordered">
            <tr>
                <td class="text-right">
                    用户名：
                </td>
                <td class="text-center">
                    <input type="text" class="form-control" v-model="user.username"  placeholder="请输入图书名称">
                </td>
                <td>
                    <span id="usernametxt"></span>
                </td>
            </tr>
            <tr>
                <td class="text-right">
                    年 龄：
                </td>
                <td class="text-center">
                    <input type="number" class="form-control" v-model="user.age" name="age" id="age" placeholder="请输入年龄">
                </td>
                <td>
                    <span id="agetxt"></span>
                </td>
            </tr>
            <tr>
                <td class="text-right">
                    性 别：
                <td >
                    <input type="radio"  v-model="user.sex" name="sex"  value="男" checked="checked" > 男
                    <input type="radio"  v-model="user.sex" name="sex"  value="女" checked="checked" > 女
                </td>
                    <span id="sextxt"></span>
                </td>
            </tr>
            <tr>
                <td class="text-right">
                    生 日：
                </td>
                <td >
                    <input type="date"  v-model="user.birthday" name="birthday" id="birthday" placeholder="请输入生日"  >
                </td>
                <td>
                    <span id="birthdaytxt"></span>
                </td>
            </tr>
            <tr>
                <td class="text-right">
                    头  像：
                </td>
                <td class="text-center">
                    <input type="file"  @change="btnUpload()"  name="pic" id="pic" class="pull-left">
                    <img :src="user.pic"  class="img-responsive pull-left " width="100" height="100">
                </td>
                <td>
                    <span id="pictxt"></span>
                </td>
            </tr>


            <tr>
                <td colspan="3" class="text-center">
                    <button type="button" @click="updateUser" class="btn btn-success">修改</button>
                </td>
            </tr>
        </table>
    </form>
</div>

<script>
    let vueApp = new Vue({
        el: "#app",
        data() {
            return {
                user : {
                    pic : "",
                }
            }
        },
        methods: {
            findById(){
                axios.get("/fzq/user/findById",{
                    params : {
                        id : window.localStorage.getItem("id"),
                    },
                    headers :{
                        "token" : window.localStorage.getItem("token")
                    }
                }).then(res=>{
                    if(res.data.status == 200){
                        this.user = res.data.data;
                    }else{
                        alert(res.data.msg)
                    }
                }).catch(e=>{
                    alert(e)
                })
            },
            btnUpload(){
                //获得要上传的文件对象
                let file=document.getElementById("pic").files[0];

                //转为FormData
                let formData=new FormData();
                formData.append("file",file);

                axios.post('/fzq/upload',formData,{contentType:"multipart/form-data",
                    headers :{
                        "token" : window.localStorage.getItem("token")
                    }
                }).then(result=>{
                    console.log(result.data.msg);
                    if(result.data.status==200){
                        this.user.pic = result.data.msg;
                    }
                }).catch(e=>{
                    alert("该功能暂停。。。");
                })
            },
           updateUser(){
                axios.post("/fzq/user/update",this.user,{
                    headers :{
                        "token" : window.localStorage.getItem("token")
                    }
                }).then(result=>{
                    if(result.data.status == 200){
                        alert(result.data.msg)
                        window.localStorage.removeItem("id")
                        location.href="/html/index.html"
                    }else{
                        alert(result.data.msg)
                    }
                }).catch(e=>{
                    alert("该功能暂停。。。");
                })

        }
        },
        created() {
            this.findById();
        }
    });
</script>
</body>
</html>